<template>
  <div
    class="login-container"
    :style="{background:$store.getters.theme,'--themeColor':theme,'--textColor':TopTextColor,'--lightOpacity':lightTheme}">
    <div class="bglogin">
      <div class="bglogin-title">{{ platformName }}</div>
      <div class="bglogin-layout">
        <div class="img-box">
          <img src="../../assets/login-illustration.png" draggable="false">
        </div>
        <div class="form-container reset-container" :class="{'mobile-form-container': device === 'mobile'}">
          <el-form ref="form" :rules="rules" :model="form"
                   label-width="0px" v-if="active != 3">
            <el-form-item label="" prop="emailInput">
              <el-input v-model.trim.trim="form.emailInput" placeholder="请输入手机号或邮箱"
                        maxlength="50" show-word-limit class="limit">
                <span slot="prefix" class="svg-container">
                  <!-- <svg-icon icon-class="user_login" class="el-input__icon input-icon" /> -->
                  <img src="../../assets/user-icon.png" draggable="false">
                </span>
              </el-input>
            </el-form-item>
            <el-form-item label="" prop="verificationCode">
              <el-input v-model.trim="form.verificationCode" placeholder="请输入验证码"
                        maxlength="6" style="width: 65%;">
                <span slot="prefix" class="svg-container">
                  <!-- <svg-icon icon-class="user_login" class="el-input__icon input-icon" /> -->
                  <img src="../../assets/code-icon.png" draggable="false">
                </span>
              </el-input>
              <el-button v-if="!emailflag || totaltime <= 0" class="getcode"
                         @click="sendCode">获取验证码</el-button>
              <el-button v-if="emailflag && totaltime > 0" class="getcode">{{ totaltime }}秒</el-button>
            </el-form-item>
            <el-form-item prop="newPwd">
              <el-input
                v-model.trim="form.newPwd"
                type="password"
                :placeholder="`请输入密码`"
              >
                <span slot="prefix" class="svg-container">
                  <!-- <svg-icon icon-class="user_login" class="el-input__icon input-icon" /> -->
                  <img src="../../assets/password-icon.png" draggable="false">
                </span>
              </el-input>
            </el-form-item>
            <el-form-item prop="surepassword" style="margin-bottom: 40px;">
              <el-input
                v-model.trim="form.surepassword"
                type="password"
                placeholder="请输入重复密码"
              >
                <span slot="prefix" class="svg-container">
                  <!-- <svg-icon icon-class="user_login" class="el-input__icon input-icon" /> -->
                  <img src="../../assets/password-icon.png" draggable="false">
                </span>
              </el-input>
            </el-form-item>
            <div class="btn-wrap">
              <el-button
                class="nextbtn"
                @click="$router.back()"
              >返回登录</el-button>
              <el-button
                class="nextbtn"
                type="primary"
                @click="submit"
              >确定</el-button>
            </div>
            <!-- <p class="tips">
              提示：如果您的电话/邮箱不可使用，请您通过其他方式联系系统管理员
            </p> -->
          </el-form>
          <div v-else class="titlep">
            <p class="oktitle" style="margin-top: 40px">
              <svg-icon class="logoFp" icon-class="ok" />
              <span style="margin-left: 10px">重置成功</span>
            </p>
            <p class="okcontent">
              提示：系统将会在<span style="color: red">{{ timenum }}</span>秒内跳转至登录页面...
            </p>
            <div style="text-align: center;">
              <el-button
                style="width: 70%;margin-top: 40px"
                class="nextbtn"
                type="primary"
                @click="gopath('/login')"
              >直接登录</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getTenantDropDownList } from '@/framework/api/user'
import { checkEmail, checkPhone } from '@/framework/utils/validate'
import { encryption, decryption } from 'DQBasic-vue-component'
import { sendMailCode, validatorAuthCode, setNewPassword, getPwdRole } from '@/framework/api/userCenter/sysUser'

export default {
  name: 'NewForgetPw',
  data() {
    const validateEmailInput = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入手机号或邮箱'))
      } else if (!checkEmail(value) && !checkPhone(value)) {
        callback(new Error('手机号或邮箱格式不正确'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (!value) {
        callback('请输入密码')
      } else if (this.pwdreg.test(value) === false) {
        callback(this.pwdregcon)
      } else {
        callback()
      }
    }
    const validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.newPwd) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入手机号/电话'))
      } else if (!checkPhone(value)) {
        callback(new Error('请输入合法的手机号/电话'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      active: 1,
      form: {
        tenantId: '000000',
        email: '',
        newPwd: '',
        surepassword: '',
        verKeyEmail: '',
        verificationCode: ''
      },
      rules: {
        tenantId: [{ required: true, trigger: 'change', message: '请选择租户' }],
        emailInput: [
          { required: true, trigger: 'change', validator: validateEmailInput }
        ],
        phone: [
          { required: true, trigger: 'change', validator: validatePhone }
        ],
        verificationCode: [
          { required: true, trigger: 'blur', message: '请输入验证码' }
        ],
        newPwd: [
          { required: true, trigger: 'blur', validator: validatePassword }
        ],
        surepassword: [
          { required: true, trigger: 'blur', validator: validatePass }
        ]
      },
      emailflag: false,
      okflag: false,
      selectList: [],
      timenum: 3,
      timer: '',
      zfscontent: '120s后再次发送',
      totaltime: 120,
      timer2: null,
      verImage: '',
      disabled: false,
      emailRequestId: '',
      text: '测试',
      kaptchaRequestId: '',
      pageKaptchaWidth: '',
      pwdreg: '',
      pwdregcon: '',
      pwdrole: ''
    }
  },
  computed: {
    ...mapGetters([
      'device'
    ]),
    platformName() {
      return this.$store.state.settings.platformName
    },
    theme() {
      return this.$store.getters.theme
    },
    TopTextColor() {
      return this.$store.getters.TopTextColor
    },
    lightTheme() {
      return `${this.theme}19`
    }
  },
  mounted() {
    this.getSelect()
    this.getPwdRole()
  },
  methods: {
    submit() {
      this.validatorAuthCode(2)
    },
    // 获取租户下拉框
    getSelect() {
      getTenantDropDownList().then((res) => {
        this.selectList = res.data
      })
    },
    // 发送验证码
    sendCode() {
      if (!this.form.tenantId) {
        this.$message({
          message: '请选择租户',
          type: 'error'
        })
      } else if (!this.form.emailInput) {
        this.$message({
          message: '请输入手机号或邮箱',
          type: 'error'
        })
      } else {
        if (checkPhone(this.form.emailInput)) {
          this.form.phone = this.form.emailInput
          this.form.email = ''
        }
        if (checkEmail(this.form.emailInput)) {
          this.form.phone = ''
          this.form.email = this.form.emailInput
        }
        const form = encryption({
          data: this.form
        })
        sendMailCode(form).then((response) => {
          this.$message({
            message: '发送成功',
            type: 'success'
          })
          this.time120()
          const res = decryption(response)
          this.form.smsRequestId = res.data.smsRequestId
          this.form.emailOrPhone = res.data.emailInput
        })
      }
    },
    // 校验验证码
    validatorAuthCode(n) {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const form = encryption({
            data: this.form
          })
          validatorAuthCode(form).then((response) => {
            this.$message({
              message: '验证成功',
              type: 'success'
            })
            this.active = n
            // this.getPwdRole()
            this.onSubmit(3, true)
          })
        }
      })
    },
    // 获取密码策略
    getPwdRole() {
      getPwdRole({ tenantId: this.form.tenantId }).then((res) => {
        this.pwdrole = res.data
        this.pwdreg = new RegExp(this.pwdrole.pwdRegularExpression)
        this.pwdregcon = this.pwdrole.pwdRgDescribe
      })
    },
    time120() {
      this.emailflag = true
      this.totaltime = 120
      this.zfscontent = `${this.totaltime}s后再次发送`
      if (!this.timer2) {
        this.timer2 = setInterval(() => {
          if (this.totaltime > 0 && this.totaltime <= 120) {
            this.totaltime--
            this.zfscontent = `${this.totaltime}s后再次发送`
          } else {
            clearInterval(this.timer2)
            this.emailflag = false
            this.timer2 = null
            // this.zfscontent = '再次发送'
          }
        }, 1000)
      }
    },
    gopath(path) {
      this.$router.push({
        path
      })
    },
    // 修改密码
    onSubmit(n, flag) {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 完成跳转登录
          if (n === 3 && flag) {
            this.okflag = false
            const obj3 = {
              email: this.form.email,
              phone: this.form.phone,
              newPwd: this.form.newPwd,
              tenantId: this.form.tenantId
            }
            const password = encryption({
              data: obj3
            })

            setNewPassword(password).then((res) => {
              if (res.success) {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.active = n
                this.okflag = true
                if (!this.timer) {
                  this.timenum = 3
                  this.timer = setInterval(() => {
                    if (this.timenum > 0 && this.timenum <= 3) {
                      this.timenum--
                    } else {
                      clearInterval(this.timer)
                      this.timer = null
                      // 先退出清空
                      // this.$store.dispatch('user/logout')
                      this.$router.push({
                        path: '/login'
                      })
                    }
                  }, 1000)
                }
              } else {
                this.$message({
                  message: res.message,
                  type: 'error'
                })
              }
            })
          }
        }
      })
    }

  }
}
</script>
<style lang="scss">
.formbox .el-input--medium .el-input__inner {
  height: 50px;
  line-height: 50px;
}
  .getcode{
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    border-radius: 0;
    // border-left: 1px solid #091934;
  }
.formbox .el-form-item {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 32px;
}
.formbox .el-form-item .el-form-item__content {
  margin-left: 0 !important;
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  .el-input {
    flex: 1;
  }
  .verCode {
    width: 100px;
    height: 50px;
    background: chocolate;
    margin-left: 20px;
    cursor: pointer;
    border: 1px solid #f7f7ff;
  }
}
</style>
<style lang="scss" scoped>
@import "~@/framework/styles/variables.scss";
.container{
  height: 100%;
  display: flex;
  flex-direction: column;
  background: url("../../assets/fpImg.png") 0 0 no-repeat;
  background-size: cover;
}
::v-deep .el-row{
  flex:1;
    display: flex;
    justify-content: center;
}
.tips {
  color: #e53013;
  text-align: center;
  font-size: 10px;
  white-space: nowrap;
}
.titlep {
  // position: absolute;
  // // top: 20%;
  // left: 2%;
  // display: flex;
  // align-items: center;
  .logoFp {
    width: 28px !important;
    height: 28px !important;
    max-height: 50px !important;
    margin-right: 10px;
  }
  span {
    font-size: 14px;
    font-family: Segoe UI;
    font-weight: 500;
    line-height: 20px;
    color: #131414;
    opacity: 1;
  }
}
.topbox {
  position: relative;
  z-index: 1;
  img {
    width: 100%;
    z-index: 2;
  }
}
.centerbox {
  position: relative;
  background: #ffffff;
  opacity: 1;
  border-radius: 4px;
  max-height: 604px;
  height: 95%;
  z-index: 9;
  padding-top: 20px;
  .spanTitle{
    margin-top: 20px;
    margin-bottom: 56px;
    justify-content: center;
    display: flex;
    font-size: 28px;
  }
  .el-steps {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
  }
  ::v-deep.el-step__head.is-finish{
    .el-step__icon.is-text{
      color: #ffffff;
      background: #3461FF;
    }
  }
  ::v-deep.el-step__title{
    font-size: 14px !important;
  }
   ::v-deep.el-step.is-horizontal .el-step__line{
    height: 1px;
    background: #C0C4CC;
  }
  .formbox {
    width: 400px;
    margin: 34px auto;
    max-width: 92%;
    .formtitle {
      margin: 40px 0 40px;
      text-align: center;
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      // line-height: 72px;
      color: #333333;
      opacity: 1;
    }
    // .formtitle2 {
    //   margin: 40px 0 100px !important;
    // }
    .nextbtn {
      display: block;
      width: 100%;
      height: 50px;
      margin: 40px auto 20px;
    }
    .nextbtn2 {
      display: inline-block;
      width: 45%;
      height: 50px;
      margin: 46px auto;
      margin: 10px 2%;
    }
    .fs {
      margin-left: 20px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 30px;
      color: #5688e8;
      opacity: 1;
      text-decoration: underline;
      cursor: pointer;
    }
    .wsd {
      margin-left: 20px;
    }
    .zfs {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 30px;
      color: #5688e8;
      opacity: 1;
      text-decoration: underline;
      cursor: pointer;
    }
    .oktitle {
      font-size: 36px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 28px;
      color: #5688e8;
      margin: 0 0 40px;
      text-align: center;
    }
    .okcontent {
      margin: 40px;
      text-align: center;
      font-size: 14px;
      color: #333333;
      line-height: 28px;
    }
  }
}
.goback {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 20px;
  opacity: 1;
  cursor: pointer;
  span {
    margin-left: 10px;
    color: #3461FF;
    font-weight: 400;
  }
}
@media only screen and (min-width: $screen-md){
  .maxScreen{
    box-shadow: 0px 10px 30px rgba(111, 141, 216, 0.1);
    margin: -100px auto;
   min-height: 575px;
  }
}
</style>
<style lang="scss" scoped>
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#eee;
$cursor: #fff;
.login-container {
  height: 100%;
  width: 100%;
  .bglogin{
    min-height: 100%;
    width: 100%;
    overflow: hidden;
    background: url("../../assets/login-bg.png") 0 0 no-repeat;
    background-size: cover;
    z-index: 999;
    .bglogin-title {
      font-family: SourceHanSansCN-Bold;
      font-weight: 700;
      font-size: 40px;
      height: 40px;
      line-height: 40px;
      color: #FFFFFF;
      text-align: center;
      margin-top: 7vh;
    }
    .bglogin-layout {
      margin-top: 48px;
      width: 100%;
      overflow: hidden;
      display: flex;
      // flex-direction: column;
      justify-content: center;
      align-content: center;
    }
    .img-box {
      margin-right: 9%;
      width: 535.41px;
      img {
        width: 100%;
      }
    }
  }
  .textbox{
    flex: 1;
    margin: 3% 9%;
    position: relative;
    .logowhite{
      width: 178px;
      height: 63px;
    }
    .bottomtext{
      position: absolute;
      bottom: 0;
      left: 0;
      font-family: PingFang SC-常规体, PingFang SC;
      font-weight: normal;
      color: #97A1B8;
      line-height: 14px;
      font-size:12px;
    }
    .contenttext{
    margin: 5% 0 2%;
    font-size: 18px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 36px;
  }
  .contenttext2{
    font-size: 16px;
    font-weight: 400;
    color: rgb(255,255,255,0.75);
    line-height: 22px;
    span:nth-of-type(2){
      margin:0 40px;
    }
  }

    .btnbox{
      width: 100px;
        font-size: 16px;
        font-family: PingFang SC-中黑体, PingFang SC;
        font-weight: normal;
        color: #FFFFFF;
        line-height: 19px;
        margin-top: 40px;
        display: flex;
        align-items: center;
        cursor: pointer;
      }
  }
  .form-container {
    position: relative;
    width: 400px;
    height: 410px;
    padding: 92px 36px 60px;
    background: #fff;
    box-shadow: 0px 4px 32px 4px rgba(0,0,0,0.0200), 0px 16px 24px 2px rgba(0,0,0,0.0400), 0px 0px 12px 0px rgba(0,0,0,0.0800);
    border-radius: 8px;
    opacity: 1;
    align-self: center;
    // margin-right: 190px;
    box-sizing: border-box;
    &::before {
      content: "重置密码";
      display: block;
      position: absolute;
      width: 174px;
      height: 44px;
      top: -11px;
      left: 50%;
      transform: translate(-50%);
      font-family: SourceHanSansCN-Medium;
      font-weight: 500;
      font-size: 18px;
      color: #FFFFFF;
      text-align: center;
      line-height: 44px;
      background: url('../../assets/login-title-bg.png') no-repeat;
      background-size: cover;
    }
  }
  .reset-container {
    padding: 83px 36px 60px;
  }
  .mobile-form-container{
    margin: auto;
  }
  .login-form {
    position: relative;
    // width: 520px;
    max-width: 100%;
    // padding: 0px 35px 0;
    margin: 0 auto;
    overflow: hidden;
  }
  /* reset element-ui css */
  ::v-deep .el-form-item__error {
    padding-top: 2px;
  }
  ::v-deep .el-input {
    display: inline-block;
    height: 40px;
    width: 100%;
    background: #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    // border: 1px solid #DCDFE6;
    input {
      height:40px;
      border: 1px solid #DCDFE6;
      // background: transparent;
      // border: 0px;
      // -webkit-appearance: none;
      // border-radius: 0px;
      // padding: 12px 5px 12px 15px;
      // color: $light_gray;
      // height: 47px;
      // caret-color: $cursor;
      // &:-webkit-autofill {
      //   box-shadow: 0 0 0px 1000px $bg inset !important;
      //   -webkit-text-fill-color: $cursor !important;
      // }
    }
     .el-input__icon{
      font-size: 16px;
    }
  }
  .login_opt{
    display: flex;
    margin-top: 10px;
    margin-bottom: 32px;
  }
  .el-form-item {
    // border: 1px solid rgba(255, 255, 255, 0.1);
    // background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
    margin-bottom: 16px;
  }
  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }
  .svg-container {
    // padding: 6px 5px 6px 15px;
    line-height: 45px;
    // color: $dark_gray;
    vertical-align: middle;
    width: 16px;
    display: inline-block;
    img {
      width: 100%;
    }
  }
  .title-container {
    position: relative;
    text-align: center;
    margin:10px 0 52px;
    .el-image{
      vertical-align: bottom;
      margin-right: 10px;
    }
    .title {
      display: inline-block;
      font-size: 18px;
      color: #131314;
      line-height: 32px;
      font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
      // margin: 0px auto 40px auto;
      text-align: center;
      font-weight: 600;
    }
  }
 .title {
      font-size: 20px;
      color: #131314;
      line-height: 28px;
      font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
      text-align: center;
      font-weight: 600;
    }
  .show-pwd {
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}
.btn-wrap {
  display: flex;
  justify-content: space-between;
  .nextbtn {
    width: 160px;;
    height: 40px;
  }
}

.loginbtn{
  width: 100%;
  height: 48px;
  font-size:16px;
}
//滑块弹窗
::v-deep .slide-dialog{
  overflow-x: hidden;
  .el-dialog{
    margin-right: 190px;
  }
}
.getcode{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-family: MicrosoftYaHei;
  border-radius: 4px;
  width: 33%;
  height: 40px;
  border: 1px solid #1289FF;
  color: #1289FF;
  // border-left: 1px solid #091934;
}
</style>
